<script>
import { mapState } from 'vuex'

export default {
  name: 'mapInfo',
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      polygonPath: []
    }
  },
  methods: {
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
    },
    addPolygonPoint() {

    }
  },
  computed: {
    ...mapState('transportStore', ['transportMap']),
    polygonPathMap() {
      return this.transportMap.map(item => ({ lat: item.markerPoint.lat, lng: item.markerPoint.lng }))
    }
  }
}
</script>

<template>
  <el-card shadow="never" class="map-info" v-if="detail.truck&&detail.drivers.length > 0">
    <div slot="header" class="clearfix">
      <span>任务轨迹</span>
    </div>
    <el-row :gutter="20" justify="center">
      <el-col class="yjddrq" :span="6"><span>车牌号：</span><label>{{ detail.truck.licensePlate }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>司机：</span><label>{{ detail.drivers[0].name }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>计划发车时间：</span><label>{{ detail.planDepartureTime }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>实际发车时间：</span><label>{{ detail.actualDepartureTime }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>计划到达时间：</span><label>{{ detail.planArrivalTime }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>实际到达时间：</span><label>{{ detail.actualArrivalTime }}</label></el-col>
    </el-row>
    <div class="map-address">
      <baidu-map class="map-view" :zoom="5" :center="polygonPathMap[0]" inertial-dragging :scroll-wheel-zoom="true">
        <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <bm-polygon :path="polygonPathMap" stroke-color="#e15536" :stroke-opacity="1" :stroke-weight="5" :editing="true" @lineupdate="updatePolygonPath"/>
        <bm-label :content="transportMap[0].name" :position="polygonPathMap[0]" :labelStyle="{color: '#e15536', fontSize : '13px'}" :title="polygonPathMap[0]"/>
        <bm-label :content="transportMap[1].name" :position=polygonPathMap[1] :labelStyle="{color: '#e15536', fontSize : '13px'}" :title="polygonPathMap[1]"/>
      </baidu-map>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.map-info {
  margin-top: 10px;

  .map-address {
    width: 100%;
    height: 500px;

    .map-view {
      width: 100%;
      height: 500px;
      margin-top: 10px;
    }
  }
}

.yjddrq {
  float: left;
  color: #20232a;
  font-size: 14px;
  margin-top: 25px;
}

.yjddrq label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #818693;
}
</style>
